<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition template="/HomeTemplate.xhtml"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                xmlns:p="http://primefaces.org/ui"
                >
    <ui:define name="body">
        <div class="main-container" >
            <p:tabMenu id="tab1" model="#{dynamicMenu.getSimpleMenuModel(5)}" style="width: 90%;"  />

            <h:form id="form" style="width: 90%" >  
                <p:panel style="border-bottom: none; width: 90%" >  

                    <p:messages id="messages" showDetail="true" autoUpdate="true" closable="true" /> 
                    <h:panelGrid columns="7"  style="border-bottom-width: 0px; border-spacing: 0px; ">  

                        <!-- add filtros aqui!-->
                        <h:outputText value="Start Date"/>  
                        <p:calendar value="#{invoiceAllBean.start}" id="start" showOn="button" pattern="dd/MM/yyyy"/> 
                        <h:outputText value="End Date"/>  
                        <p:calendar value="#{invoiceAllBean.finish}" id="end" showOn="button" pattern="dd/MM/yyyy" /> 
                        <h:outputText value="Canceled :" />  
                        <p:selectBooleanCheckbox id="annulled" value="#{invoiceAllBean.annulled}">   
                        </p:selectBooleanCheckbox>  

                    </h:panelGrid>
                    <h:panelGrid columns="6"  style="border-bottom-width: 0px; border-spacing: 0px; ">  
                        <h:outputText value="Invoice No :" />  
                        <p:inputText id="invoiceNo" value="#{invoiceAllBean.noInvoice}"  ></p:inputText>
                        <h:outputText value="Type of Customer :" />                
                        <p:selectOneMenu value="#{invoiceAllBean.typeDealer}" converter="#{typeDealerConverter}">
                            <f:selectItem itemLabel="Select Type Dealer" itemValue=""  />
                            <f:selectItems value="#{typeDealerBean.typeDealers}" var="del"
                                           itemLabel="#{del.description}" itemValue="#{del}"/>
                        </p:selectOneMenu>
                        <h:outputText value="Customer Name :" />  
                        <p:selectOneMenu value="#{invoiceAllBean.person}" converter="#{personConverter}">
                            <f:selectItem itemLabel="Select Customer" itemValue=""  />
                            <f:selectItems value="#{personBean.persons}" var="per"
                                           itemLabel="#{per.name}" itemValue="#{per}"/>
                        </p:selectOneMenu>
                    </h:panelGrid>  
                    <h:panelGrid columns="5" cellpadding="5" style="border-bottom-width: 30px">  
                        <p:commandButton  value="Filter" icon="filter" action="#{invoiceAllBean.filterCriteria()}" update="dataTable" ></p:commandButton>
                    </h:panelGrid>
                </p:panel>

                <p:dialog modal="true" widgetVar="statusDialog" header="Status" draggable="false" closable="false" resizable="false" width="30px;">  
                    <p:graphicImage value="/resources/img/icons/ajax-loading-bar.gif" />  
                </p:dialog>  

                <p:dataTable id="dataTable" var="invoice" value="#{invoiceAllBean.invoices}" widgetVar="invoiceTable" paginator="true"
                             paginatorTemplate="{CurrentPageReport}  {FirstPageLink} {PreviousPageLink} {PageLinks}
                             {NextPageLink} {LastPageLink} {RowsPerPageDropdown}" paginatorPosition="bottom" editable="true" editMode="cell"
                             rows="10" rowsPerPageTemplate="10,20,40" style="width: 90%"
                             > 
                    <p:column width="50px">  
                        <f:facet name="header">  
                            Invoice No.
                        </f:facet>  

                        <h:outputText value="#{invoice.invoiceNumber}" />  

                    </p:column>
                    <p:column >  
                        <f:facet name="header">  
                            Date 
                        </f:facet>  

                        <h:outputText value="#{invoice.dateInvoice}" >  
                            <f:convertDateTime pattern="MM/dd/yyyy"></f:convertDateTime>
                        </h:outputText>
                    </p:column> 
                    <p:column>  
                        <f:facet name="header">  
                            Customer
                        </f:facet>  

                        <h:outputText value="#{invoice.idPerson.name} #{invoice.idPerson.corpName}" />  

                    </p:column> 
                    
                    <p:column >  
                        <f:facet name="header">  
                            Total Price
                        </f:facet>  

                        <h:outputText value="#{invoice.totalValue}" />  

                    </p:column> 
                    
                    <p:column >  
                        <f:facet name="header">  
                            Status
                        </f:facet>  

                        <h:outputText value="#{invoice.isCancel}" />  

                    </p:column>
                    <p:column >  
                        <f:facet name="header">  
                            PDF
                        </f:facet>  

                        <p:commandButton  icon="pdf" ajax="false" onclick="PrimeFaces.monitorDownload(start, stop);"> 
                            <p:fileDownload value="#{invoiceAllBean.printJasper(invoice)}"/> 
                        </p:commandButton>

                    </p:column> 
                    <p:column >  
                        <f:facet name="header">  
                            Cancel
                        </f:facet>  

                        <p:commandButton  icon="cancel2" action="#{invoiceAllBean.annulInvoice(invoice)}" ajax="false"/>

                    </p:column> 

                    <f:facet name="footer">  
                        In total there are #{invoiceAllBean.invoices.size()} Items.  
                    </f:facet>  

                </p:dataTable> 


            </h:form>  
            <script type="text/javascript">
                            function start() {
                                statusDialog.show();
                            }

                            function stop() {
                                statusDialog.hide();
                            }
            </script>  
        </div>      
    </ui:define>
</ui:composition>

